<template>
  <div class="login-container">
    <div class="top">
      <div class="ban">
        <div class="zhu zhu01"></div>
        <div class="zhu zhu02"></div>
        <div class="zhu zhu03"></div>
        <div class="zhu zhu04"></div>
        <div class="zhu zhu05"></div>
        <div class="zhu zhu06"></div>
      </div>
    </div>
    <div class="card">
      <div class="form-container">
        <div class="form-item">
          <i class="iconfont icon-geren"></i>
          <div class="input">
            <input v-model="userName" type="text" placeholder="请输入手机号码" />
          </div>
        </div>
        <div class="form-item">
          <i class="iconfont icon-jiesuo"></i>
          <div class="input">
            <input v-model="password" type="password" placeholder="请输入密码" />
          </div>
        </div>
      </div>
      <div class="button-container">
        <van-button round type="primary" color="pink" block @click="submitHandler">
          登 录
        </van-button>
        <div class="tips">
          <span @click="noPhoneHandler">没有账号？</span>
          <span @click="forgotPasswordHandler">忘记密码？</span>
        </div>
        <van-divider :style="{ color: 'pink', borderColor: 'pink' }">
          <h2 class="divider-text">or</h2>
        </van-divider>
        <div class="footer-container">
          <div class="item" @click="otherLoginHandler('qq')">
            <i class="iconfont icon-denglu_QQdenglu"></i>
          </div>
          <div class="item" @click="otherLoginHandler('wx')">
            <i class="iconfont icon-weixindenglu"></i>
          </div>
          <div class="item" @click="otherLoginHandler('wb')">
            <i class="iconfont icon-weibo"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
  <Loading></Loading>
</template>

<script setup>
import Loading from '@/components/my-loading/index.vue'
import { login } from '@/api'

import { useUserStore } from '@/stores'
import { useRouter, useRoute } from 'vue-router'

const userStore = useUserStore()
const route = useRoute()
const router = useRouter()

const userName = ref('309324904@qq.com')
const password = ref('123456')

// 注册
const noPhoneHandler = () => {
  showSuccessToast('您点击了没有账号？')
}
// 找回密码
const forgotPasswordHandler = () => {
  showFailToast('您点击了没有账号？')
}
// 登录
const submitHandler = async () => {
  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
    overlay: true,
    duration: 0,
  })

  const params = { account: userName.value, password: password.value }
  const res = await login(params)
  if (res.code === 200) {
    userStore.setToken(res.result.token)
    router.push(route.query.returnUrl || '/')
    showSuccessToast('登录成功')
  } else {
    showFailToast(res.msg)
  }
}
// 其他登录方式
const otherLoginHandler = (type) => {
  showToast(`您选择了${type}登录`)
}
</script>

<style scoped lang="less">
.login-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
  .top {
    position: relative;
    background: @default-color;
    width: 100%;
    height: 240px;
    display: flex;
    align-items: end;
    justify-content: center;
    &::after,
    &::before {
      content: '';
      position: absolute;
      width: 17px;
      height: 132px;
      background: #fff;
      border-radius: 8px;
      opacity: 0.2;
    }
    &::after {
      right: 49px;
      top: 76px;
    }
    &::before {
      right: 16px;
      top: 99px;
    }
    .ban {
      position: relative;
      width: 86%;
      height: 100px;
      background: #fff;
      border-radius: 8px 8px 0 0;
      z-index: 1;
      display: flex;
      .zhu {
        position: absolute;
        border-radius: 8px;
        width: 17px;
        &.zhu01,
        &.zhu03,
        &.zhu05 {
          background: @default-color;
          height: 60px;
        }

        &.zhu02,
        &.zhu04 {
          background: #fff;
          border-radius: 8px 8px 0 0;
          height: 50px;
        }

        &.zhu01 {
          left: 60px;
          top: 0;
          height: 60px;
          border-radius: 0 0 8px 8px;
        }

        &.zhu02 {
          left: 77px;
          top: -50px;
        }

        &.zhu03 {
          left: 94px;
          top: 0;
          height: 80px;
          border-radius: 0 0 8px 8px;
        }

        &.zhu04 {
          left: 111px;
          top: -30px;
          height: 30px;
        }

        &.zhu05 {
          left: 128px;
          top: 0;
          height: 30px;
          border-radius: 0 0 8px 8px;
        }

        &.zhu06 {
          background: @default-color;
          width: 17px;
          height: 17px;
          left: 94px;
          top: 90px;
          border-radius: 50%;
        }
      }
    }
  }
  .card {
    position: relative;
    margin: 0 auto;
    background: #fff;
    width: 86%;
    border-radius: 0 0 8px 8px;
    box-shadow:
      10px 5px 15px rgba(218, 235, 254, 0.5),
      -10px 5px 15px rgba(218, 235, 254, 0.5);
    padding: 20px;
    .form-container {
      .form-item {
        display: flex;
        align-items: center;
        height: 50px;
        margin-bottom: 10px;
        .input {
          margin-left: 10px;
          display: flex;
          align-items: center;
          width: 100%;
          height: 100%;
          border-bottom: 1px solid @border-color-01;
          font-size: 14px;

          input {
            width: 100%;
            height: 100%;
            border: none;
            padding-top: 2px;
          }
        }
        .iconfont {
          font-size: 20px;
          color: @text-color-02;
        }
      }
    }
    .button-container {
      margin-top: 30px;
      .tips {
        font-size: 12px;
        display: flex;
        padding: 10px 10px 0 10px;
        justify-content: space-between;
        color: @text-color-02;
      }
    }
    .footer-container {
      display: flex;
      justify-content: space-evenly;
      .item {
        .iconfont {
          font-size: 30px;
        }
      }
    }
  }
}
:v-deep(.van-divider) {
  margin: 10px 0;
}
</style>
